<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const route = useRoute()
const activity = ref({})
const stuId = localStorage.getItem('loginId')
const signedUp = ref(false)

// 新增：评论相关
const comments = ref([])

const fetchActivityDetail = async () => {
  try {
    const res = await axios.get(`http://localhost:8080/student/${stuId}/${route.params.actId}/getActivityById`)
    if (res.data) {
      activity.value = res.data.data
      if (res.data.code === 200) {
        signedUp.value = false
      } else if (res.data.code === 201) {
        signedUp.value = true
      } else {
        ElMessage.error(res.data.msg ? res.data.msg : '获取活动详情失败')
      }
    } else {
      ElMessage.error('获取活动详情失败')
    }
  } catch (e) {
    ElMessage.error('获取活动详情失败')
  }
}

// 新增：获取评论
const fetchComments = async () => {
  try {
    const res = await axios.get(`http://localhost:8080/student/${route.params.actId}/getComment`)
    if (res.data && res.data.code === 200) {
      comments.value = res.data.data || []
    } else {
      comments.value = []
      if (res.data && res.data.msg) {
        ElMessage.info(res.data.msg)
      }
    }
  } catch (e) {
    ElMessage.error('获取评论失败')
  }
}

// 报名
const joinActivity = async () => {
  try {
    const res = await axios.post(
      `http://localhost:8080/student/${activity.value.actId}/joinActivity`,
      Number(stuId),
      { headers: { 'Content-Type': 'application/json' } }
    )
    if (res.data && res.data.code === 200) {
      ElMessage.success('报名成功')
      signedUp.value = true
    } else {
      ElMessage.error(res.data && res.data.msg ? res.data.msg : '报名失败')
    }
  } catch (e) {
    ElMessage.error('报名失败')
  }
}

// 取消报名
const cancelActivity = async () => {
  try {
    const res = await axios.delete(`http://localhost:8080/student/${stuId}/${activity.value.actId}/cancelActivity`)
    if (res.data && res.data.code === 200) {
      ElMessage.success('取消报名成功')
      signedUp.value = false
    } else {
      ElMessage.error(res.data && res.data.msg ? res.data.msg : '取消报名失败')
    }
  } catch (e) {
    ElMessage.error('取消报名失败')
  }
}

onMounted(() => {
  fetchActivityDetail()
  fetchComments() // 新增：页面加载时获取评论
})
</script>
<template>
  <div>
    <h2>活动详情</h2>
    <p><strong>活动名：</strong>{{ activity.title }}</p>
    <p><strong>组织ID：</strong>{{ activity.orgId }}</p>
    <p><strong>分数：</strong>{{ activity.point }}</p>
    <p><strong>内容：</strong>{{ activity.content }}</p>
    <p><strong>开始时间：</strong>{{ activity.startTime }}</p>
    <p><strong>结束时间：</strong>{{ activity.endTime }}</p>
    <p><strong>地点：</strong>{{ activity.location }}</p>
    <p><strong>状态：</strong>{{ activity.status }}</p>
    <div style="margin-top: 20px;">
      <el-button
        type="primary"
        v-if="!signedUp"
        @click="joinActivity"
      >报名</el-button>
      <el-button
        type="danger"
        v-if="signedUp"
        @click="cancelActivity"
      >取消报名</el-button>
    </div>
    <!-- 评论区 -->
    <el-divider />
    <h3 style="margin-bottom: 18px; color: #357ab8;">评论区</h3>
    <div v-if="comments.length === 0" style="color: #888; text-align: center; margin: 32px 0;">暂无评论</div>
    <div class="comment-list">
      <el-card
        v-for="(comment, idx) in comments"
        :key="comment.stuId + '-' + comment.joinTime + '-' + idx"
        class="comment-card"
        shadow="hover"
      >
        <div class="comment-header">
          <div class="comment-user">
            <el-avatar size="small" style="background: #357ab8; color: #fff;">
              {{ comment.stuId ? String(comment.stuId).slice(-4) : '匿' }}
            </el-avatar>
            <span class="stu-id">{{ comment.stuId || '匿名' }}</span>
          </div>
          <span class="comment-time">{{ comment.joinTime }}</span>
        </div>
        <div class="comment-score">
          <el-rate :model-value="comment.score" disabled show-score score-template="{value}分" />
        </div>
        <div class="comment-content">
          {{ comment.comment }}
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 10px;
}
.comment-card {
  border-radius: 10px;
  border: 1px solid #e6f0fa;
  background: #fafdff;
  padding: 18px 20px 12px 20px;
  box-shadow: 0 2px 8px rgba(53, 122, 184, 0.07);
}
.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.comment-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #357ab8;
}
.stu-id {
  font-size: 15px;
}
.comment-time {
  font-size: 13px;
  color: #aaa;
}
.comment-score {
  margin-bottom: 6px;
}
.comment-content {
  font-size: 15px;
  color: #333;
  line-height: 1.7;
  padding-left: 2px;
}
</style>